<template>
  <div class="myanimalswiper">
    <Animal-swiper :key="datalist.length">
      <Animal-swiper-item v-for="data in datalist" :key="data._id" class="animalwiperitem">
        本期“明星”：{{ data.name }}
        <img :src="data.imgPath" />
      </Animal-swiper-item>
    </Animal-swiper>

    <!-- <film-header class="sticky"></film-header>支持透传，写在这的class会传给组件 -->
    <router-view></router-view>
  </div>
</template>
<script>
import AnimalSwiper from '@/components/AnimalList/AnimalSwiper'
import AnimalSwiperItem from '@/components/AnimalList/AnimalSwiperItem'
import {getInfo} from '@/api/api'
//import axios from 'axios'
export default {
  data(){
        return{
            loading:true,
            datalist:'',
            total:''
        }
    },
    created(){
        this.getData()
    },
    methods:{
        getData(){
            getInfo().then(res=>{
                if(res.data.status==200){
                    this.datalist=res.data.data
                    this.datalist=this.datalist.filter(item=>{
                      if(item.name=='花花'||item.name=='帕帕'||item.name=='小海盗'){
                        return item
                      }
                    })
                    this.total=res.data.total
                    this.loading=false
                }
            })
        },
    },
  components: {
    AnimalSwiper,
    AnimalSwiperItem
  }
}
</script>
<style lang="scss" scoped>
.animalswiperitem {
  img {
    width: 100%;
    height: 12.5rem;
  }
}
.sticky{
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
}
</style>
